<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
    <style>
      .bg-red {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <!-- 栅格布局需要使用媒体查询，如需兼容ie8 i9 需要额外引入 -->
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- 
      栅格布局 定义容器 
      layui-container 在不同设备下宽度不同 
      如果要始终100% 需要用 layui-fluid 
    -->
    <div class="layui-container">
      <!-- 
        定义行
        行间距 layui-col-space* 支持1-30的双数 以及 1 5 15 25 的单数
      -->
      <div class="layui-row layui-col-space30">
        <!-- 
          定义列 共12份
          xs 手机 超小屏幕 <768px
          sm 平板 小屏幕 >=768px
          md 桌面 中等屏幕 >=992px
          lg 桌面 大型屏幕 >=1200px
        -->
        <div class="layui-col-sm6 layui-col-md4">
          <div class="bg-red">
            md4 sm6
            <button class="layui-show-md-block layui-btn">md 为block</button>
          </div>
        </div>
        <div class="layui-col-sm6 layui-col-md4">
          <div class="bg-red">
            md4 sm6
            <button class="layui-hide-md layui-btn">md 隐藏</button>
          </div>
        </div>
        <div class="layui-col-sm6 layui-col-md4">
          <div class="bg-red">md4 sm6</div>
        </div>
      </div>
      <div class="layui-row layui-col-space30">
        <div class="layui-col-md4">
          <div class="bg-red">md4/12</div>
        </div>
        <div class="layui-col-md4 layui-col-md-offset4">
          <div class="bg-red">偏移4列</div>
        </div>
      </div>
      <div class="layui-fluid">100%</div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script></script>
  </body>
</html>
